import { Component, Prop, Vue } from 'vue-property-decorator'
import style from './Steps.less'
@Component
export default class Steps extends Vue {
  @Prop({ default: 0 }) private index!: number
  @Prop() private stepData!: any[]

  private render() {
    return (
      <div>
        <ul class={style.steps}>
          {this.stepData &&
            this.stepData.map((item: any, index: number) => (
              <li
                key={item.title + index}
                style={{ width: `${(1 / this.stepData.length) * 100}%` }}
                class={{
                  active: this.index === index,
                  before: this.index > index,
                }}
              >
                <p class={{ title: true }}>
                  <p class={{ index: true }}>{index + 1}</p>
                  <p>{item.title}</p>
                </p>
              </li>
            ))}
        </ul>
      </div>
    )
  }
}
